import React from 'react';
import { Splitter as AntdSplitter } from 'antd';
import type { SplitterProps as AntdSplitterProps } from 'antd';
import { createStyles } from 'antd-style';

export interface SplitterProps extends Omit<AntdSplitterProps, 'children'> {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
  children?: React.ReactNode;
}

const useStyles = createStyles(({ token, css }) => ({
  splitter: css`
    border-color: ${token.colorBorder};
  `,
}));

const SplitterComponent: React.FC<SplitterProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const splitterClassName = cx(
    className,
    customClassName,
    styles.splitter
  );

  return <AntdSplitter className={splitterClassName} {...restProps} />;
};

const Splitter = Object.assign(SplitterComponent, {
  Panel: AntdSplitter.Panel,
});

export { Splitter };
export default Splitter;

